import React, { useContext } from 'react'
import DataContext from '@/Context/index'
import { Arrow } from '@react-vant/icons'
import './index.less'
import huati from '@/assets/images/huati.png'

const Index = () => {
  const {
    topic: { list },
  } = useContext(DataContext)
  
  return (
    <div className="mhy-topic-recommend">
      <div className="recommend-title">
        热门话题
        <span className="show-more">
          更多
          <Arrow />
        </span>
      </div>
      <div className="mhy-card recommend-container">
        {
          <div className="top-topic">
            <img src={list[0].cover} alt="" />
            <div className="topic-item">
              <p className="title">#{list[0].name}#</p>
            </div>
          </div>
        }
        {list.slice(1, 5).map((item, idx) => {
          return (
            <div key={idx} className="recommend-item">
              <img src={huati} alt="" />
              {item.name}
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default Index
